<template>
  <div>
    <top-tab-nav :list="topTabList" :current="current" @change="changeTab"></top-tab-nav>
    <scroll-view
      class="shop-ele"
      refresher-enabled
      scroll-y="true"
      @refresherrefresh="reload"
      :refresher-triggered="triggered"
      :style="{ height: screenHeight }"
      @scrolltolower="loadMore"
    >
      <div class="ul wrap">
        <div class="li" @click="toDetail(item)" v-for="(item, index) in productList" :key="item.id">
          <div class="img-box">
            <img class="img" mode="aspectFill" :src="ossDomain + item.coverImg" alt="" />
          </div>
          <div class="text-box">
            <div class="cn">{{ item.name }}</div>
            <div class="en">{{ item.enName }}</div>
          </div>
          <div class="price-box">
            <text class="te">会员9折</text>
            <text class="new">¥ {{ roundNumber(item.price * 0.9, 2) }}</text>
            <text class="old">{{ item.price }}</text>
          </div>
        </div>
      </div>
      <uni-load-more :status="loading ? 'loading' : noMore ? 'noMore' : 'more'" />
    </scroll-view>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, watch, computed } from 'vue'
import { useStore } from 'vuex'
import { productlist, proClass } from '@/utils/api/goods'

import { roundNumber } from '@/utils/reg'
import { ossDomain } from '@/utils/oss'
const store = useStore()
const { proxy } = getCurrentInstance()
let obj = reactive({})
const screenHeight = ref<number>(0)
const statusBarHeight = computed(() => store.getters['system/statusBarHeight'])
const bottomSafeArea = computed(() => store.getters['system/bottomSafeArea'])

// 页面高度-状态栏高度-底部安全区域-导航栏高度90rpx-顶部选项卡高度126rpx(有10rpx 是间距)-底部tabbar高度116rpx
screenHeight.value = `calc(100vh - ${statusBarHeight.value}px - ${bottomSafeArea.value}px - 90rpx - 126rpx - 116rpx)`

// triggered:刷新的状态
let triggered = ref<boolean>(false)

// 分页数据
let pageObj = {
  current: 1,
  size: 10
}
const loading = ref<boolean>(false)
const noMore = ref<boolean>(false)
// top 选项卡

interface TabItem {
  id: number
  cn: string
  en: string
}
const current = ref<number>(0)

const topTabList = reactive<TabItem[]>([])

let isTabChange = false
const changeTab = (index: number) => {
  console.log(index)
  current.value = index
  isTabChange = true
  pageObj.current = 1
  noMore.value = false
  getProductlist()
}

let isReload = false

const getProClass = async () => {
  const res = await proClass()
  if (res.code == 200) {
    Object.assign(
      topTabList,
      res.data.map((item) => ({
        id: item.id,
        cn: item.name,
        en: item.enName
      }))
    )
    getProductlist()
  }
}
let productList = ref<Array<any>>([])
const getProductlist = async () => {
  console.log(4, loading.value, noMore.value, topTabList.length)
  // 如果正在加载，则return
  if (loading.value || noMore.value || topTabList.length == 0) return
  console.log('获取商品列表')

  if (isReload) {
    triggered.value = true
  }
  loading.value = true
  const res = await productlist({
    classId: topTabList[current.value].id,
    ...pageObj
  })
  console.log('商品列表：', res)
  loading.value = false
  let data = res.data
  if (isReload) {
    triggered.value = false
  }
  if (data.list) {
    if (isReload || isTabChange) {
      productList.value = data.list
      isTabChange = false
      isReload = false
    } else {
      productList.value = [...productList.value, ...data.list]
    }
  }
  if (data.next) {
    // 说明还有下一页
    pageObj.current++
  } else {
    noMore.value = true
  }
  console.log(res)
}

const toDetail = (item: any) => {
  uni.navigateTo({
    url: '/pages/goodsInfo/goodsInfo?id=' + item.id
  })
}

const reload = () => {
  isReload = true
  pageObj.current = 1
  noMore.value = false
  init()
}

const init = () => {
  getProClass()
}
onMounted(() => {
  console.log('获取分类')
  init()
})
</script>

<style lang="scss" scoped>
@import './shop.scss';
</style>
